<template>
  <basic-container>
    <avue-crud
      :data="data"
      :option="option"
      :page.sync="page"
      @on-load="rowLoad"
      @search-change="searchChange"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @row-save="rowSave"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot-scope="{ row, type, size }" slot="menu">
        <el-button
          icon="el-icon-check"
          :size="size"
          :type="type"
          @click="handleSetRole(row)"
        >
          设置角色
        </el-button>
      </template>
    </avue-crud>
    <el-drawer title="角色设置" :visible.sync="visible">
      <div class="drawer__content">
        <el-tree
          ref="tree"
          :data="roleList"
          highlight-current
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="roleDefault"
          :props="roleProps"
        >
        </el-tree>
        <span class="avue-dialog__footer avue-dialog__footer--right">
          <el-button @click="$refs.drawer.closeDrawer()">取 消</el-button>
          <el-button type="primary" @click="SubmitSetRole"> 确 定 </el-button>
        </span>
      </div>
    </el-drawer>
  </basic-container>
</template>

<script>
import avue from "@/mixins/avue.js";
import { SE } from "@/common/constants.js";
import { baseUrl } from "@/config/env";
import {
  user_page,
  user_edit,
  user_delete,
  user_add,
  role_tree,
  user_setUserRole,
  user_getUserRole,
} from "@/api/core/permission";

export default {
  mixins: [avue],
  data() {
    return {
      visible: false,
      roleList: [],
      roleDefault: [],
      roleProps: {
        label: "name",
      },
      selectionList: [],
      curUser: {},
      data: [],
      option: {
        dialogDirection: "rtl",
        dialogType: "drawer",
        menuType: "menu",
        column: [
          {
            label: "用户名",
            prop: "username",
            search: true,
          },
          {
            label: "真实姓名",
            prop: "realName",
            search: true,
          },
          {
            label: "头像",
            prop: "avatar",
            type: "upload",
            // dataType: "json",
            listType: "picture-img",
            props: {
              // label: "fileId",
              value: "previewUrl",
            },
            propsHttp: {
              // home: baseUrl,
              // res: "result.0",
              url: "previewUrl",
              name: "fileName",
            },
            action: "alumni/app/uploadFile",
            tip: "只能上传jpg/png用户头像，且不超过500kb",
          },
          {
            label: "邮箱",
            prop: "email",
            hide: true,
          },
          {
            label: "手机号",
            prop: "phone",
            hide: true,
          },
          {
            label: "角色",
            prop: "roleIds",
            type: "tree",
            multiple: true,
            dicData: [],
            props: {
              label: "name",
              value: "id",
            },
          },
          {
            label: "状态",
            prop: "status",
            type: "radio",
            search: true,
            dicData: SE,
          },
        ],
      },
    };
  },
  created() {
    role_tree().then((res) => {
      this.findObject(this.option.column, "roleIds").dicData = res.result;
    });
  },
  methods: {
    handleSetRole(row) {
      this.visible = true;
      this.curUser = row;
      role_tree()
        .then((res) => {
          this.roleList = this.$s.res(res);
        })
        .then(() => {
          user_getUserRole({ userId: row.id }).then((res) => {
            this.roleDefault = this.$s.res(res);
          });
        });
    },
    SubmitSetRole() {
      const nodeSelected = this.$refs.tree.getCheckedNodes(false, true);
      const ids = [];
      nodeSelected.forEach((element) => {
        ids.push(element.id);
      });
      user_setUserRole({
        id: this.curUser.id,
        roleIds: ids.join(","),
      }).then((res) => {
        this.$s.suc(res);
        this.visible = false;
        this.rowLoad();
      });
    },
    rowLoad() {
      user_page(this.params).then((res) => {
        this.data = this.$s.res(res).records;
      });
    },
    rowSave(row, loading, done) {
      user_add(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        })
        .catch(() => {
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      user_edit(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        })
        .catch(() => {
          loading();
        });
    },
    rowDel(row, index, done) {
      this.$confirm("确定数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        user_delete({ ids: row.id })
          .then((res) => {
            this.$s.suc(res);
          })
          .then(() => {
            this.rowLoad();
            done();
          });
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.demo-drawer__content {
  width: 100%;
  padding: 20px;
}
</style>
